<template>
  <div>
    <div @click="ShowGallary" class="banner" v-for="item in placeDetailList" :key="item.id">
      <img class="banner-img" :src="item.imgUrl" />
      <div class="banner-detail">
        <div class="banner-imgNum">
          <i class="img-icon iconfont">&#xe61b;</i>
          <span class="img-num">item.imgNum</span>
        </div>
        <span class="banner-name">{{ item.title }}</span>
      </div>
    </div>
    <fade-animation>
      <common-gallary :imgList="placeDetailList[0].imgList" v-if="isShowGallary" @hiddenGallary="hiddenGallary"></common-gallary>
    </fade-animation>
  </div>
</template>

<script>
import Gallary from '../../common/gallary/Gallary'
import FadeAnimation from '../../common/animation/fade/FadeAnimation'
export default {
  props: ['placeDetailList'],
  data () {
    return {
      /* 是否显示轮播页面 */
      isShowGallary: false
    }
  },
  components: {
    commonGallary: Gallary,
    FadeAnimation
  },
  methods: {
    /* 显示画廊 */
    ShowGallary () {
      this.isShowGallary = true
      /* 说明一下这里有个bug,就是当我显示画廊的时候,但是整个页面还可以滚动 */
      /* 所以这里要传递一个事件给Detail父元素让他overflow变成hidden */
      this.$emit('bodyHidden')
    },
    /* 隐藏画廊 */
    hiddenGallary () {
      this.isShowGallary = false
      /* 让Detail父元素能重新滚动 */
      this.$emit('bodyShow')
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner {
  position: relative
}
.banner-img {
  width: 100%
}
.banner-detail {
  height: 25%
  position: absolute
  margin-left:0.2rem
  bottom: 0.2rem
  color: #fff
  .banner-imgNum {
    display: flex
    justify-content: center
    align-items: center
    background-color: rgba(0,0,0,0.5)
    width: 1.2rem
    height: 0.4rem
    border-radius: 0.2rem
    margin-bottom: 0.15rem
    .img-num {
      margin-left: 0.1rem
      font-size: 0.2rem
    }
    .img-icon {
      font-size: 0.2rem
    }
  }
  .banner-name {
    font-size: 0.35rem
    text-shadow: 0 1px 2px rgba(0,0,0,0.75)
  }
  z-index: 1
}
.banner::after {
  content: ''
  width: 100%
  min-height:0.6rem
  position:absolute
  bottom: 0
  left: 0
  background-color: transparent
  background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.8))
}
</style>
